
<template>
  <div class="chart-card">
    <h3>部门资产占比统计</h3>
    <div class="chart-container">
      <!-- 环形图 -->
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getDeptCountData } from "@/api/Chart";

const chartRef = ref(null);
let chartInstance: echarts.ECharts | null = null;

onMounted(async () => {
  try {
    const res = await getDeptCountData();

    const mainSeriesData = res.data.map(item => ({
      name: item.deptName,
      value: Number(item.total),
    }));

    const drilldownData = res.data.map(item => ({
      dataGroupId: item.deptName,
      data: item.statusDetails
        .filter(detail => Number(detail.count) > 0)
        .map(detail => ({
          name: detail.status,
          value: Number(detail.count),
        })),
    }));

    if (chartRef.value) {
      chartInstance = echarts.init(chartRef.value);

      // 主图配置（柱状图）
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: mainSeriesData.map(item => item.name),
          axisLabel: {
            rotate: 45, // 倾斜 x 轴标签防止重叠
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "部门资产",
            type: "bar",
            data: mainSeriesData.map(item => item.value),
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };

      chartInstance.setOption(option);

      chartInstance.on("click", function (event) {
        if (event.componentType === "series" && event.seriesType === "bar") {
          const deptName = event.name;
          const deptData = drilldownData.find(item => item.dataGroupId === deptName);
          if (!deptData) return;

          // 下钻图表配置（柱状图）
          const statusOption = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            xAxis: {
              type: "category",
              data: deptData.data.map(item => item.name),
              axisLabel: {
                rotate: 45,
              },
            },
            yAxis: {
              type: "value",
            },
            graphic: [
              {
                type: "text",
                left: 20,
                top: 20,
                style: {
                  text: "← 返回",
                  fontSize: 16,
                  fill: "#333",
                  cursor: "pointer",
                },
                onclick: () => {
                  chartInstance.setOption(option);
                },
              },
            ],
            series: [
              {
                name: deptName,
                type: "bar",
                data: deptData.data.map(item => item.value),
                label: {
                  show: true,
                  position: "top",
                },
              },
            ],
          };

          chartInstance.setOption(statusOption);
        }
      });
    }
  } catch (error) {
    console.error("获取数据失败:", error);
  }
});
</script>

<style scoped>
.chart-card {
  width: 100%;
  max-width: 680px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 15px auto;
}

.chart-card h3 {
  font-size: 18px;
  font-weight: bold;
  padding-left: 16px;
  text-align: left;
}

.chart-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.chart {
  width: 100%;
  height: 520px;
}
</style>

